(function (doc) {
  /** @type {HTMLCanvasElement} */
  //获取绘制图形的2d环境
  let clock = doc.getElementById("clock"),
    ctx = clock.getContext("2d"),
    cWidth = ctx.canvas.width,
    cHeight = ctx.canvas.height,
    r = cHeight / 2,
    t = null;
  let Clock = function (opt) {
    this.drawPanelStyle = opt.drawPanelStyle;
    this.drawIndictorStyle = opt.drawIndictorStyle;
    this.drawCentralPointStyle = opt.drawCentralPointStyle;
    this.drawCentralPointInsideStyle = opt.drawCentralPointInsideStyle;
    this.init();
  };
  Clock.prototype = {
    hours: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2],
    //初始化
    init: function () {
      this.draw();
      // t = setInterval(this.draw.bind(this), 1000);
      t = setInterval(()=>{
        this.draw();
      }, 1000);
    },
    //绘制方法
    draw: function () {
      ctx.clearRect(0, 0, cWidth, cHeight);
      let hours = getTimes().hours,
        minutes = getTimes().minutes,
        seconds = getTimes().seconds;
      ctx.save();
      this.drawPanel();
      this.drawHoursNum();
      this.drawHoursIndicator(hours, minutes);
      this.drawMinutesIndictor(minutes);
      this.drawSecondsIndictor(seconds);
      this.drawCentralPoint();
      ctx.restore();
    },
    //面板的绘制表盘
    drawPanel: function () {
      ctx.translate(r, r);
      ctx.beginPath();
      ctx.fillStyle = this.drawPanelStyle;
      ctx.arc(0, 0, r - 25, 0, 2 * Math.PI, false);
      ctx.fill();
    },
    //绘制数字
    drawHoursNum: function () {
      let hours = this.hours;
      ctx.font = "40px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillStyle = "#424242";
      hours.forEach((item, idx) => {
        let hNumberAngle = ((2 * Math.PI) / 12) * idx,
          x = Math.cos(hNumberAngle) * (r - 60),
          y = Math.sin(hNumberAngle) * (r - 60);
        ctx.beginPath();
        ctx.fillText(item, x, y);
      });
    },
    //绘制中心圆点
    drawCentralPoint: function () {
      ctx.beginPath();
       //中心点外侧
      ctx.fillStyle = this.drawCentralPointStyle;
      ctx.arc(0, 0, 13, 0, 2 * Math.PI, false);
      ctx.fill();
      ctx.beginPath();
      //中心点内侧
      ctx.fillStyle = this.drawCentralPointInsideStyle;
      ctx.arc(0, 0, 6, 0, 2 * Math.PI, false);
      ctx.fill();
    },
    //绘制时针
    drawHoursIndicator: function (hours, minutes) {
      let hAngle = ((2 * Math.PI) / 12) * hours,
        mAngle = ((2 * Math.PI) / 12 / 60) * minutes;
      ctx.save();
      ctx.beginPath();
      ctx.lineWidth = "6";
      ctx.lineCap = "round";
      ctx.strokeStyle = this.drawIndictorStyle;
      ctx.rotate(hAngle + mAngle);
      ctx.moveTo(0, 0);
      ctx.lineTo(0, -r * 0.55);
      ctx.stroke();
      ctx.restore();
    },
    //绘制分针
    drawMinutesIndictor: function (minutes) {
      let mAngle = ((2 * Math.PI) / 60) * minutes;
      ctx.save();
      ctx.beginPath();
      ctx.lineWidth = "5";
      ctx.strokeStyle = this.drawIndictorStyle;
      ctx.lineCap = "round";
      ctx.rotate(mAngle);
      ctx.moveTo(0, 0);
      ctx.lineTo(0, -r * 0.60);
      ctx.stroke();
      ctx.restore();
    },
    //绘制秒针
    drawSecondsIndictor: function (seconds) {
      let sAngle = ((2 * Math.PI) / 60) * seconds;
      ctx.save();
      ctx.beginPath();
      ctx.lineWidth = "3";
      ctx.strokeStyle = this.drawIndictorStyle;
      ctx.lineCap = "round";
      ctx.rotate(sAngle);
      ctx.moveTo(0, 0);
      ctx.lineTo(0, -r * 0.65);
      ctx.stroke();
      ctx.restore();
    },
  };
  //处理时间
  function getTimes() {
    const d = new Date();
    return {
      hours: d.getHours(),
      minutes: d.getMinutes(),
      seconds: d.getSeconds(),
    };
  }

  window.Clock = Clock;
})(document);
